<template>
  <div>
    <h4>首页 <el-text>/用户评论</el-text></h4>
    <div>
      <el-form :inline="true">
        <el-form-item label="评价内容">
          <el-input
              placeholder="请输入评价内容"
              v-model="sname"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="danger" @click="batchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
          :data="currentTableData"
          style="width: 100%"
          ref="tableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="250"></el-table-column>
        <el-table-column prop="appraise" label="评论内容" width="300"></el-table-column>
        <el-table-column prop="username" label="用户昵称" width="280"></el-table-column>
        <el-table-column prop="name" label="咨询师" width="300"></el-table-column>
        <el-table-column prop="issue" label="咨询问题" width="350"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-link type="primary" @click="() => handleDelete(scope.row)">删除咨询</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改后的分页容器 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {
  ElTable,
  ElTableColumn,
  ElPagination,
  ElLink,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElText,
  ElMessageBox,
  ElMessage
} from 'element-plus';

const currentTableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const sname = ref('');
const tableRef = ref(null);
const selectedRows = ref([]);

const fetchData = async () => {
  try {
    const response = await axios.get("/api/userAppraises/all", {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        sname: sname.value
      }
    });
    console.log(response);

    const data = response.data.data;
    currentTableData.value = data.list;
    total.value = data.total;

  } catch (error) {
    ElMessage.error('获取数据失败: ' + error.message);
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

const search = () => {
  currentPage.value = 1;
  fetchData();
};

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
        '确定要删除这条咨询记录吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    );

    const response = await axios.delete(`/api/userAppraises/${row.id}`);
    if (response.data.code === 200) {
      ElMessage.success(response.data.message);
      fetchData();
    } else {
      ElMessage.error(response.data.message || '删除失败');
    }
  } catch (e) {
    if (e !== 'cancel') {
      ElMessage.error('删除失败: ' + e.message);
    }
  }
};

const batchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录');
    return;
  }

  try {
    await ElMessageBox.confirm(
        `确定要批量删除这${selectedRows.value.length}条咨询记录吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    );

    const ids = selectedRows.value.map(item => item.id);
    const response = await axios.delete(`/api/userAppraises/batch`, {
      data: ids
    });

    if (response.data.code === 200) {
      ElMessage.success(response.data.message);
      fetchData();
      selectedRows.value = [];
    } else {
      ElMessage.error(response.data.message || '批量删除失败');
    }
  } catch (e) {
    if (e !== 'cancel') {
      ElMessage.error('批量删除失败: ' + e.message);
    }
  }
};

const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
/* 修改后的分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 改为flex-end使内容右对齐 */
  margin-top: 20px;
  padding-right: 20px; /* 添加右侧内边距 */
}

/* 如果需要让分页组件本身右对齐 */
.el-pagination {
  justify-content: flex-end;
}
</style>